<template>
    <div>
        <div class="flex justify-center items-center">
            <span class="h-[1px] w-20 bg-gray-200"></span>
            <span class="text-4xl text-gray-300 m-4">注册新账号</span>
            <span class="h-[1px] w-20 bg-gray-200"></span>
        </div>
        <el-form :model="registryForm" :rules="rules" ref="rulesRef">
            <el-form-item prop="username">
                <el-input v-model="registryForm.username" placeholder="请输入用户名">
                    <template #prefix>
                        <el-icon><User /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" show-password v-model="registryForm.password" placeholder="请输入密码">
                    <template #prefix>
                        <el-icon><Lock /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="rePassword">
                <el-input type="password" show-password v-model="registryForm.rePassword" placeholder="请确认密码">
                    <template #prefix>
                        <el-icon><Lock /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="realName">
                <el-input v-model="registryForm.realName" placeholder="请输入用户昵称">
                    <template #prefix>
                        <el-icon><User /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="w-[240px]" type="primary" @click="registry">提 交</el-button>
                <el-button class="w-[116px]" type="primary" plain @click="$router.push('/index/login')">登 录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { registryRequest } from '@/api/user-api'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'

// 获取路由对象
const router = useRouter();

// 表单数据
const registryForm = reactive({
    username: '',
    password: '',
    rePassword: '',
    realName: ''
})

const rulesRef = ref()

// 用户名，密码匹配规则
const pattern = {
    username: /^[a-zA-Z][a-zA-Z0-9_]{6,15}$/,
    password: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,24}$/
}

// 用户名自定义校验
const validateUsername = (rules, value, callback) => {
    if (!pattern.username.test(value)) {
        callback(new Error('必须以字母开头，允许字母数字下划线，长度6~16个字符'))
    } else {
        callback()
    }
}

// 密码自定义校验
const validatePassword = (rules, value, callback) => {
    if (!pattern.password.test(value)) {
        callback(new Error('包含大小写字母和数字的组合，可以使用特殊字符，长度8-24个字符'))
    } else {
        callback()
    }
}

// 确认密码自定义校验
const validateRePassowrd = (rules, value, callback) => {
    if (value !== registryForm.password) {
        callback(new Error('2次密码不一致'))
    } else {
        callback()
    }
}

// 表单数据校验规则
const rules = reactive({
    username: [
        {
            required: true,
            message: '用户名不能为空', 
            trigger: 'blur'
        },
        { 
            min: 6, 
            max: 16, 
            message: '用户名长度必须是6-16个字符', 
            trigger: 'blur'
        },
        { 
            validator: validateUsername, 
            trigger: 'blur' 
        }
    ],
    password: [
        {
            required: true,
            message: '密码不能为空', 
            trigger: 'blur'
        },
        { 
            min: 8, 
            max: 24, 
            message: '密码长度必须是8-24个字符', 
            trigger: 'blur'
        },
        { 
            validator: validatePassword, 
            trigger: 'blur' 
        }
    ],
    rePassword: [
        {
            required: true,
            message: '密码不能为空', 
            trigger: 'blur'
        },
        { 
            min: 8, 
            max: 24, 
            message: '密码长度必须是8-24个字符', 
            trigger: 'blur'
        },
        { 
            validator: validateRePassowrd, 
            trigger: 'blur' 
        }
    ],
    realName: [
        {
            required: true,
            message: '用户昵称不能为空', 
            trigger: 'blur'
        }
    ]
})

// 注册提交
const registry = () => {
    rulesRef.value.validate(valid => {
        if(valid) {
            // 执行注册
            registryRequest(registryForm)
            .then(res => {
                if(res.code === 200) {
                    // 回到登录页
                    router.push('/index/login')
                }
                ElNotification({
                    message: res.msg,
                    type: res.code === 200 ? 'success' : 'error'
                })
            })
        } else {
            // 终止表单提交
            return false
        }
    })
}
</script>

<style scoped>

</style>